<script setup>

import {reactive} from "vue";

const activeColor = $ref('red')
const fontSize = $ref(30)
const widthSize = $ref(200)

const styleObject = reactive({
  color: 'red',
  fontSize: '13px',
  width:'200px',
  height:'100px',
  backgroundColor:'yellow'
})

const baseStyles = reactive({
  color: 'red',
  fontSize: '13px',
})

const overridingStyles = reactive({
  width:'100px',
  height:'100px',
  backgroundColor:'black'
})

</script>

<template>
  <h3>style样式控制</h3>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px',width: widthSize + 'px' }">
    这里是样式style绑定1
  </div>
  <div :style="{ 'font-size': fontSize + 'px' }">
    这里是样式style绑定2
  </div>

  <div :style="styleObject">
    这里是样式style绑定3
  </div>
  <div :style="[baseStyles, overridingStyles]">
    这里是样式style绑定4
  </div>

</template>

<style>

</style>
